<!-- ======================================================= -->
<!-- == frontend/src/layouts/BucketDetailLayout.vue 的完整内容 == -->
<!-- ======================================================= -->
<template>
    <el-container class="bucket-detail-layout">
        <!-- 1. 左侧的“第二层”上下文菜单 -->
        <el-aside width="200px" class="context-menu">
            <el-scrollbar>
                <el-menu :default-active="activeMenu" router>
                    <!-- 菜单分组：用量查询 -->
                    <!-- <el-sub-menu index="usage">
                        <template #title>
                            <span>用量查询</span>
                        </template>
<el-menu-item index="usage-basic">基础数据</el-menu-item>
<el-menu-item index="usage-stats">热点统计</el-menu-item>
</el-sub-menu> -->

                    <!-- 菜单分组：文件管理 -->
                    <el-sub-menu index="file-management">
                        <template #title>
                            <span>文件管理</span>
                        </template>
                        <!-- 点击“文件列表”，会跳转到 BucketContents 路由 -->
                        <el-menu-item :index="`/buckets/${bucketName}`">
                            文件列表
                        </el-menu-item>
                        <!-- <el-menu-item index="data-retrieval">数据索引</el-menu-item> -->
                    </el-sub-menu>
                    <el-sub-menu index="data-management">
                        <template #title>
                            <el-icon>
                                <Finished />
                            </el-icon>
                            <span>数据管理</span>
                        </template>
                        <el-menu-item :index="`/buckets/${bucketName}/lifecycle`">
                            <el-icon>
                                <Timer />
                            </el-icon>
                            <span>生命周期</span>
                        </el-menu-item>
                        <el-menu-item :index="`/buckets/${bucketName}/website`">
                            <el-icon>
                                <Monitor />
                            </el-icon>
                            <span>静态网站托管</span>
                        </el-menu-item>
                    </el-sub-menu>
                    <!-- 【核心修改】权限控制 (可展开) -->
                    <el-sub-menu index="permission-control">
                        <template #title>
                            <el-icon>
                                <Lock />
                            </el-icon>
                            <span>权限控制</span>
                        </template>
                        <!-- <el-menu-item :index="`/buckets/${bucketName}/permissions/public-access-block`">
                            阻止公共访问
                        </el-menu-item> -->
                        <el-menu-item :index="`/buckets/${bucketName}/permissions/acl`">
                            <el-icon> <!-- (可选) 为原有项也加上图标，保持风格统一 -->
                                <Key />
                            </el-icon>
                            <span>读写权限</span>
                        </el-menu-item>
                        <!-- <el-menu-item :index="`/buckets/${bucketName}/permissions/policy`">
                            <el-icon>
                                <Tickets />
                            </el-icon>
                            <span>存储桶策略</span>
                        </el-menu-item> -->
                        <el-menu-item :index="`/buckets/${bucketName}/permissions/cors`">
                            <el-icon>
                                <Connection />
                            </el-icon> <!-- 使用一个合适的图标 -->
                            <span>跨域设置</span>
                        </el-menu-item>
                        <!-- Bucket 授权策略等，未来添加 -->
                    </el-sub-menu>

                    <!-- 菜单分组：数据安全 -->
                    <el-sub-menu index="data-security">
                        <template #title>
                            <el-icon>
                                <Finished />
                            </el-icon>
                            <span>数据安全</span>
                        </template>
                        <el-menu-item :index="`/buckets/${bucketName}/security/versioning`">
                            版本控制
                        </el-menu-item>
                        <!-- <el-menu-item index="security-hotlink">防盗链</el-menu-item> -->
                    </el-sub-menu>
                    <el-sub-menu index="data-management-logging">
                        <template #title>
                            <el-icon>
                                <Document />
                            </el-icon>
                            <span>日志管理</span>
                        </template>
                        <el-menu-item :index="`/buckets/${bucketName}/logging/settings`">
                            日志存储配置
                        </el-menu-item>
                        <!-- 指向查看页面 -->
                        <el-menu-item :index="`/buckets/${bucketName}/logging/viewer`">
                            日志查询
                        </el-menu-item>
                    </el-sub-menu>
                    <el-menu-item :index="`/buckets/${bucketName}/delete`" class="delete-bucket-item">
                        <el-icon>
                            <Delete />
                        </el-icon>
                        <span>删除 Bucket</span>
                    </el-menu-item>
                </el-menu>
            </el-scrollbar>
        </el-aside>

        <!-- 2. 右侧的“第三层”主内容区 -->
        <el-main class="main-content-area">
            <!-- 这里的 router-view 将会渲染子路由，比如 BucketContentsPage.vue -->
            <router-view v-if="isBucketNameValid" />
            <div v-else v-loading="true" style="height: 100%;"></div>
        </el-main>
    </el-container>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
// 【重要】确保导入了这些图标
import { Delete, Lock, Finished, Monitor, Key, Tickets, Connection } from '@element-plus/icons-vue';

console.log('调用 BucketDetailLayout.vue');
const props = defineProps({
    bucketName: {
        type: String,
        required: true,
    },
    path: {
        type: Array,
        default: () => [] // <-- 【核心修正】
    }
});

// ======================== 【诊断代码】 ========================
console.log('%c--- BucketDetailLayout.vue SCRIPT SETUP ---', 'color: blue; font-weight: bold;');
const route = useRoute();

console.log('Route object at component setup:', route);
console.log('Full Path:', route.fullPath);
console.log('Name:', route.name);
console.log('Params:', JSON.stringify(route.params));
console.log('Matched routes:', route.matched.map(r => ({ path: r.path, name: r.name })));
// ==========================================================

const activeMenu = computed(() => route.path);
const isBucketNameValid = computed(() => {
    return props.bucketName && !/\{\{.*\}\}/.test(props.bucketName);
});
</script>

<style scoped>
.bucket-detail-layout {
    display: flex;
    height: 100%;
    /* 确保布局占满父容器高度 */
}

/* 新增的 aside 容器样式 */
.secondary-menu-container {
    /* 使用 Flex 布局，让菜单可以撑满并实现底部对齐 */
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;
    /* 根据你的主题设置背景色 */
    border-right: 1px solid #e6e6e6;
}

.secondary-menu {
    /* 关键：让 el-menu 也变成 flex 容器，并撑满可用空间 */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    border-right: none;
    /* 边框由父容器控制 */
}

/* 核心魔法：应用到“删除”按钮上的样式 */
.delete-bucket-item {
    /* 这一行会自动将此元素推到 Flex 容器的底部 */
    margin-top: auto;
    /* 增加一些底部间距，让它不贴边 */
    margin-bottom: 20px;
}

/* 可选：给删除按钮一个危险提示的悬停效果 */
.delete-bucket-item:hover {
    background-color: #fef0f0 !important;
    /* Element Plus 的 danger-light-9 颜色 */
}

/* 可选：让删除按钮的文字和图标默认就是警告色 */
.delete-bucket-item .el-icon,
.delete-bucket-item span {
    color: #F56C6C;
    /* Element Plus 的 danger 颜色 */
}

.content-main {
    padding: 0;
    background-color: #f0f2f5;
    /* 根据你的主题设置内容区背景色 */
}
</style>